//双饼图
<template>
  <div class="pie-chart">
    <div class="pursue-one"
         ref="echartsA"></div>
    <span>{{option.title}}</span>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data () {
    return {

    }
  },
  props: {
    option: {
      type: Object,
      default: () => ({})
    }
  },
  methods: {
    init () {
      console.log('饼', this.option);
      const { data } = this.option
      var myChart = echarts.init(this.$refs.echartsA);
      myChart.setOption({
        series: [
          {
            // name: "新渠道",
            type: "pie",
            radius: ["50%", "80%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              fontSize: 12,
              color: "#000",
              position: "center",
              formatter: "{d}% \n{b}",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 12,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: data
          },
        ],
      })
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },

  },
  mounted () {
    this.init()
  },
}
</script>

<style scoped>
.pie-chart {
  display: inline-block;
  text-align: center;
}
.pursue-one {
  width: 1rem;
  height: 1rem;
}
.pie-chart span {
  font-size: .175rem;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #333333;
}
</style>
